<ul class="list-group">
    <template ngFor let-trace [ngForOf]="zipkin.traces">
        <li (click)=trace.toggleTrace() class="list-group-item list-group-item-action" style="cursor:pointer">
            &nbsp;
            <span class="col-sm-5">

                        <template #tipContent>Trace <b>Hash Color</b><br></template>
                        <span [ngbTooltip]="tipContent" placement="top" class="color-identifier" [style.background-color]="trace.color" >&nbsp;</span>
            <b>{{trace.name}} - {{trace.id}}</b>
            </span>
            <span class="col-sm-2">{{trace.formatTimestamp()}}</span>
            <span class="col-sm-2">{{trace.formatDuration()}}</span>

            <span class="col-sm-2">{{trace.spans.length}} spans</span>

        </li>
        <li [hidden]="!trace.expanded" class="list-group-item" style="border-top:0px">
            <tracechart [trace]="trace"></tracechart>
        </li>
    </template>
</ul>
